<template>
  <div class="container">
    <div id="particles"></div>
    <el-container>
      <div class="menu_container">
        <el-aside style="width: 200px">
          <div class="grid-content bg-left">
            <el-menu
              :default-openeds="['1', '2']"
              style="  border: solid;border-width: 1px;border-color: #ebeef5;border-radius: 8px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);"
            >
              <el-submenu index="1">
                <template slot="title">
                  <!-- <i class="el-icon-message"></i> -->
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-wanggediqiu"></use>
                  </svg>
                  网格生成
                </template>
                <el-submenu index="1-1">
                  <template slot="title">不规则网格</template>
                  <el-menu-item-group>
                    <template slot="title">Triangle</template>
                    <el-menu-item index="1-1-1">Delaunay</el-menu-item>
                    <el-menu-item index="1-1-2">MeshAdapt</el-menu-item>
                    <el-menu-item index="1-1-3">Automatic</el-menu-item>
                    <el-menu-item index="1-1-4">Frontal-Delaunay</el-menu-item>
                    <el-menu-item index="1-1-5">Initial Mesh Only</el-menu-item>
                    <el-menu-item index="1-1-6"
                      >Delaunay for Quads</el-menu-item
                    >
                    <el-menu-item index="1-1-7"
                      >Packing of Parallelograms</el-menu-item
                    >
                  </el-menu-item-group>
                  <el-menu-item-group>
                    <template slot="title">Others</template>
                    <el-menu-item index="1-1-8">Quadrangle</el-menu-item>
                    <el-menu-item index="1-1-9">Voronoi</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
                <el-submenu index="1-2">
                  <template slot="title">规则网格</template>
                  <el-menu-item index="1-2-1">Hexagon</el-menu-item>
                  <el-menu-item index="1-2-2">Quadrangle</el-menu-item>
                </el-submenu>
              </el-submenu>
              <el-submenu index="2">
                <template slot="title">
                  <!-- <i class="el-icon-menu"></i> -->
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-view"></use>
                  </svg>
                  网格转换
                </template>
                <el-menu-item-group>
                  <template slot="title">拓扑相容</template>
                  <el-menu-item index="2-1">三角网转四边形网格</el-menu-item>
                  <el-menu-item index="2-2">四边形网格转三角网</el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group title="拓扑不容">
                  <el-menu-item index="2-3">DEM转六边形网格</el-menu-item>
                  <el-menu-item index="2-3">DEM转三角网</el-menu-item>
                  <el-menu-item index="2-3">DEM转Voronoi</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </div>
        </el-aside>
      </div>
      <div class="main_container">
        <el-main>
          <router-view></router-view>
        </el-main>
      </div>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  mounted() {
    particlesJS.load("particles", "particles.json", function() {
      // console.log("callback - particles.js config loaded");
    });
  },
};
</script>
<style lang="less" scoped>
.container {
  height: 100%;

  .el-container {
    height: 100%;

    .menu_container {
      height: 100%;

      .el-aside {
        height: 100%;

        .el-menu-vertical-demo {
          height: 100%;
        }
      }
    }

    .main_container {
      height: 100%;
      width: 100%;

      .el-main {
        height: 100%;
        width: 100%;
      }
    }
  }
}
</style>
